import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Farm } from "../../../../entity/farm.model";
import { DataSourceService } from "../../../../service/data-source/data-source.service";
import { TagData } from "../../../../entity/tag-data.model";
import { DatePipe } from "@angular/common";
import { Http } from "@angular/http";
import { List } from 'linqts';
import { ApplicationService } from "../../../../service/application.service";

@Component({
  selector: 'app-wind-direction',
  templateUrl: './wind-direction.component.html',
  styleUrls: ['./wind-direction.component.css']
})
export class WindDirectionComponent implements OnInit {

  options: any;
  optionsWindEnergy: any;
  echartsIntance: any;
  @Input() seriesData: number[];
  @Input() windEnergySeriesData: number[] = [];
  @Input() titleText: string;
  @Input() radius: number;
  @Input() empty: number;
  constructor(
    public application: ApplicationService,
    private dataSource: DataSourceService,
    private datePipe: DatePipe,
    private http: Http,
  ) { }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['seriesData'] && changes['seriesData'].currentValue) {

      this.initEcharts();

    }
    if (changes['windEnergySeriesData'] && changes['windEnergySeriesData'].currentValue) {

      this.initEchartsWindEnergy();

    }
  }
  ngOnInit() {

  }
  initWindEnergy() {


  }

  initEchartsWindEnergy() {
    let maxValue = Math.max.apply(null, this.windEnergySeriesData);
    this.optionsWindEnergy = {
      grid: {
        top: 0,
        bottom: 0,
        left: 20,
        right: 20,
      },
      radar: [
        {
          indicator: [
            {
              text: 'N',
              max: Math.ceil(maxValue),
              axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                show: true,
                // formatter: null,
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: '#fff',
                  text: "center"
                }
              }
            },
            { text: 'NNE', max: Math.ceil(maxValue) },
            { text: 'NE', max: Math.ceil(maxValue) },
            { text: 'ENE', max: Math.ceil(maxValue) },
            { text: 'E', max: Math.ceil(maxValue) },
            { text: 'ESE', max: Math.ceil(maxValue) },
            { text: 'SE', max: Math.ceil(maxValue) },
            { text: 'SSE', max: Math.ceil(maxValue) },
            { text: 'S', max: Math.ceil(maxValue) },
            { text: 'SSW', max: Math.ceil(maxValue) },
            { text: 'SW', max: Math.ceil(maxValue) },
            { text: 'WSW', max: Math.ceil(maxValue) },
            { text: 'W', max: Math.ceil(maxValue) },
            { text: 'WNW', max: Math.ceil(maxValue) },
            { text: 'NW', max: Math.ceil(maxValue) },
            { text: 'NNW', max: Math.ceil(maxValue) }
          ],
          center: ['50%', '50%'],
          radius: this.radius || 60,
          z: 2,
          axisLine: {            // 坐标轴线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#ccc',
              width: 1,
              type: 'solid'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#ccc'
            }
          },
          splitArea: {
            show: false
          }
        },




      ],
      series: [
        {
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          // itemStyle: { normal: { areaStyle: { type: 'default' ,color: 'rgba(40,132,179,0.9)'} } },
          data: [
            {
              value: this.windEnergySeriesData,
              name: '玫瑰风向图',
              itemStyle: {
                normal: {
                  color: 'rgba(40,132,179,1)',
                  /* label: {
                    show: true,
                    formatter: function (params) {
                      return params.value;

                    }
                  }, */
                  areaStyle: {
                    color: 'rgba(40,132,179,0.9)'
                  }
                }
              }
            }
          ]
        },
      ]
    };
  }
  initEcharts() {
    let maxValue = Math.max.apply(null, this.seriesData);
    this.options = {
      grid: {
        top: 0,
        bottom: 0,
        left: 20,
        right: 20,
      },
      radar: [
        {
          indicator: [
            {
              text: 'N', max: Math.ceil(maxValue),
              axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                show: true,
                // formatter: null,
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: '#fff',
                  align: "center",
                  baseline: "middle"
                }
              },
            },
            {
              text: 'NNE',
              max: Math.ceil(maxValue),

            },
            { text: 'NE', max: Math.ceil(maxValue) },
            { text: 'ENE', max: Math.ceil(maxValue) },
            { text: 'E', max: Math.ceil(maxValue) },
            { text: 'ESE', max: Math.ceil(maxValue) },
            { text: 'SE', max: Math.ceil(maxValue) },
            { text: 'SSE', max: Math.ceil(maxValue) },
            { text: 'S', max: Math.ceil(maxValue) },
            { text: 'SSW', max: Math.ceil(maxValue) },
            { text: 'SW', max: Math.ceil(maxValue) },
            { text: 'WSW', max: Math.ceil(maxValue) },
            { text: 'W', max: Math.ceil(maxValue) },
            { text: 'WNW', max: Math.ceil(maxValue) },
            { text: 'NW', max: Math.ceil(maxValue) },
            { text: 'NNW', max: Math.ceil(maxValue) }
          ],
          center: ['50%', '50%'],
          radius: this.radius || 60,
          z: 2,

          axisLine: {            // 坐标轴线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#ccc',
              width: 1,
              type: 'solid'
            }
          },

          splitArea: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#ccc'
            }
          }
        }

      ],
      series: [
        {
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          // itemStyle: { normal: { areaStyle: { type: 'default' ,color: 'rgba(40,132,179,0.9)'} } },
          data: [
            {
              value: this.seriesData,
              name: '玫瑰风向图',
              itemStyle: {
                normal: {
                  color: 'rgba(40,132,179,1)',
                  /* label: {
                    show: true,
                    formatter: function (params) {
                      return params.value;

                    }
                  }, */
                  areaStyle: {
                    color: 'rgba(40,132,179,0.9)'
                  }
                }
              }
            }
          ]
        },
      ]
    };
    this.updateEchart();
  }
  //初始化图表数据
  onChartInit(ec: any) {
    this.echartsIntance = ec;
  }

  //更新图表数据
  updateEchart() {
    if (this.echartsIntance != null) {
      this.echartsIntance.setOption(this.options);
    }
  }
}
interface Data {
  [index: number]: number
}
interface FarmData {
  farmName: string,
  driectionCode: string,
  speedCode: string,
  tagData?: CodeData[],
  windEnergy: number,
}
interface CodeData {
  time: Date,
  driectionValue: number,
  speedValue: number,
  windEnergy: number,
}


// WEBPACK FOOTER //
// ./src/app/module/monitor/wind-energy/wind-direction/wind-direction.component.ts